<template>
    <div class="addUser w944">
        <alert ref="alert"></alert>
        <div class="label_top">
            <button @click="cancel"><i>&nbsp;</i>返回</button>
            <p>{{updateTitle}}</p>
        </div>
        <div class="addCont">
            <labelAll ref="labelAll" :LabelsIds="LabelsIds" :LabelsNames="LabelsNames"
                v-on:labelNamesChanges="reveiceChange($event)"></labelAll>
            <div class="addName marB" v-if="isopen==1"><span>用户属性：</span>
                <el-select v-model="searchSelect" placeholder="请选择属性"
                    :disabled="this.isopen==1||this.nowType=='edit'?false:true">
                    <el-option v-for="item in permissionArr" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
                <a @click="openUserClassify" style="font-size: 14px;cursor: pointer;color: #44CEF6"
                    v-if="this.isopen==0&&this.nowType!='edit'">去开启用户分类</a>
            </div>
            <div class="telPhone marB">
                <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" label="right">
                    <el-form-item label="注册手机号：" prop="phone">
                        <el-input v-model.number="ruleForm.tel" placeholder="请输入手机号.." maxLength="11"></el-input>
                    </el-form-item>
                </el-form>
                <em class="warn"><i>*</i>必选项</em>
            </div>
            <div class="addName marB"><span>用户名字：</span>
                <el-input placeholder="请输入用户名字" v-model="nickname"></el-input>
                <em class="warn"><i>*</i>必选项</em>
            </div>
            <div class="addName marB"><span>工号：</span>
                <el-input placeholder="请输入用户工号" v-model="jobNum" maxLength="6"></el-input>
            </div>
            <div class="addSubVideo marB">
                <span>用户头像：</span>
                <div class="updownvideo">
                    <el-upload class="avatar-uploader" refs="uploadxls"
                        action="http://www.h3clearning.com/huathree-back/uploadFile" :headers="myHeaders"
                        :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"><b
                                style="display:block;font-weight:normal"><em>上传图片</em></b></i>
                    </el-upload>
                    <em>建议尺寸为200*200像素，大小小于1M</em>
                </div>
            </div>
            <div class="addSubTuijian marB">
                <span>性别：</span>
                <el-select v-model="sex" placeholder="请选择性别">
                    <el-option v-for="item in option" :key="item.val" :label="item.label" :value="item.val"></el-option>
                </el-select>
            </div>
            <div class="addName marB" style="position: relative;"><span>年龄：</span>
                <div class="select-box" v-model="birthday">
                    <span class="item">
                        <select v-model="formData.year">
                            <option v-for="item in year" :value="item">{{item}}年</option>
                        </select>
                    </span>
                    <span class="item" @change="getDay">
                        <select v-model="formData.month">
                            <option v-for="item in month" :value="item">{{item}}月</option>
                        </select>
                    </span>
                    <span class="item">
                        <select v-model="formData.day">
                            <option v-for="item in day" :value="item">{{item}}日</option>
                        </select>
                    </span>
                </div>
            </div>
            <div class="addSubTuijian marB">
                <span>学历：</span>
                <el-select v-model="education" placeholder="请选择学历">
                    <el-option v-for="item in educationOption" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="province marB">
                <span>工作省份：</span>
                <el-cascader v-model="city" :options="cityArr" :props="optionProps" @change="cityArrChange"
                    placeholder="选择地区"></el-cascader>
            </div>
            <div class="addName marB enterprise"><span>企业/组织：</span>
                <el-cascader v-model="orgArr" :options="organizationArr" :props="defaultProps"></el-cascader>
                <em class="warn"><i>*</i>必选项</em>
            </div>
            <div class="addSubTuijian marB">
                <span>岗位：</span>
                <el-select v-model="gangweivalues" placeholder="请选择">
                    <el-option v-for="item in gangweioption" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="addName marB" style="height: 56px;">
                <div style="overflow: hidden;">
                    <span class="tit" style="float: left;">兴趣：</span>
                    <div class="labelFour"><span v-for="item in this.LabelsNames">{{item}}</span></div>
                    <a @click="openLabel" class="openLabel">选择标签</a>
                </div>
                <p class="labelWarn">最多可选四个标签</p>
            </div>
            <div class="addName marB text"><span>邮箱：</span>
                <el-input placeholder="请输入邮箱地址..." v-model="userEmail"></el-input>
            </div>
            <div class="addName marB text"><span>地址：</span>
                <el-input placeholder="请输入常用地址..." v-model="userAddress"></el-input>
            </div>
            <div class="footerButton">
                <a @click="checkSave" v-bind:style="{background: clickLock==true ? '#44CEF6' : '#3a8ee6'}">保存</a>
                <a @click="cancel" class="cancel">取消</a>
            </div>
        </div>
    </div>
</template>
<script>
    import labelAll from '../../components/label.vue';
    import alert from '../../components/Alert.vue';
    export default {
        data() {
            return {
                LabelsIds: '',
                LabelsNames: '',
                labelType: 'user',
                nowType: 'add',
                clickLock: true,
                updateTitle: '',
                // 编辑绑定的内容start
                isopen: 0,
                phone: '',
                nickname: '',
                jobNum: '',
                orgArr: '',
                orgName: '',
                imageUrl: '',
                education: '',
                sex: '',
                userEnterp: '',
                organizationArr: [],
                defaultProps: {
                    value: 'id',
                    label: 'name',
                    children: 'childrenList',
                    checkStrictly: true
                },
                bumenvalues: '',
                gangweivalues: '',
                skills: '',
                selectedItem: [],
                selectedId: [],
                userEmail: '',
                phone: '',
                userAddress: '',
                zhuceTime: '',
                id: '',
                birthday: '',
                year: [],
                month: [],
                day: [],
                // 编辑绑定的内容end
                option: [{
                    val: 0,
                    label: '女'
                }, {
                    val: 1,
                    label: '男'
                }],
                qiyeoption: [],
                bumenoption: [],
                gangweioption: [],
                subjects: [],
                educationOption: [],
                ruleForm: {
                    tel: ''
                },
                formData: {
                    year: 2019,
                    month: 1,
                    day: 1
                },
                //				新增省份选择
                city: [],
                cityArr: [],
                proviceid: '',
                cityid: '',
                regionid: '',
                optionProps: {
                    value: 'id',
                    label: 'name',
                    children: 'list'
                },
                getProvId: '',
                searchSelect: '',
                permissionArr: [],
                myHeaders: {
                    Authorization: this.$root.userInfoMsg.sessionId
                }
            }
        },
        methods: {
            getParams() {
                var paramsId = this.$route.params.id;
                console.log('-getParams-id--', this.$route.params.id)
                var routerParams = this.$route.params.type;
                if (routerParams == 'edit' && this.$route.params.id != '') {
                    this.nowType = 'edit';
                    this.updateTitle = "编辑学员";
                    this.$ajax({
                        url: this.$root.jifuUrl + "/getUserById?id=" + this.$route.params.id,
                        headers: {
                            'ContentType': 'application/json; charset=utf-8'
                        },
                        success: res => {
                            if (res.data.code == 200) {
                                console.log('---/getUserById---', res.data.data)
                                var userData = res.data.data
                                this.phone = userData.phone,
                                    this.nickname = userData.nickname,
                                    this.imageUrl = userData.headimg,
                                    this.userEmail = userData.email,
                                    this.jobNum = userData.jobNum,
                                    // this.orgName = 
                                    // this.orgArr = 
                                    // this.education = 
                                    // this.sex = 
                                    this.birthday = userData.birthday

                            } else {
                                console.log("获取详细信息失败")
                            }
                        }
                    });
                } else {
                    this.nowType = 'add';
                    this.updateTitle = "新增学员";
                }
            },
            selectRadio(e) {
                this.orgArr = e;
            },
            getOrganizationArr() {
                this.$ajax({
                    url: this.$root.jifuUrl + "/getOrganizationInfo?" + '&rootcompanyid=1',
                    method: 'GET',
                    data: {},
                    success: res => {
                        if (res.data.code == 200) {
                            this.organizationArr = res.data.data;
                        }
                    }
                });
            },
            openLabel() {
                this.$refs.labelAll.labelTable = true;
            },
            reveiceChange(event) {
                this.LabelsIds = event.arg1;
                this.LabelsNames = event.arg2;
            },
            cityArrChange(data) {
                console.log('data:', data, this.city);
                this.proviceid = data[0];
                if (data[1] != undefined) {
                    this.cityid = data[1];
                } else {
                    this.cityid = '';
                };
                if (data[2] != undefined) {
                    this.regionid = data[2];
                } else {
                    this.regionid = '';
                };
            },
            getTreeDataCity(data) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].list.length < 1) {
                        data[i].list = undefined;
                    } else {
                        this.getTreeDataCity(data[i].list);
                    }
                }
                return data;
            },
            newAdd() {
                let that = this;
                if (that.orgArr == '') {
                    that.organizationid = '';
                } else if (that.orgArr != '') {
                    that.organizationid = that.orgArr.pop();
                };
                if (this.LabelsIds != '') {
                    this.labels = this.LabelsIds.join(",")
                } else {
                    this.labels = ''
                };
                let newDetail = {
                    rootcompanyid: 1,
                    roleLabel: that.searchSelect,
                    phone: that.ruleForm.tel,
                    nickname: that.nickname,
                    jobNum: that.jobNum,
                    headimg: that.imageUrl,
                    education: that.education,
                    sex: that.sex,
                    organizationid: that.organizationid,
                    stationid: that.gangweivalues,
                    labels: this.labels,
                    email: that.userEmail,
                    address: that.userAddress,
                    birthday: that.formData.year + '-' + that.formData.month + '-' + that.formData.day,
                    proviceid: that.proviceid,
                    cityid: that.cityid,
                };
                if (that.ruleForm.tel == '' || that.nickname == '' || newDetail.organizationid == '') {
                    this.$refs.alert.show({
                        alertText: '*为必选项！',
                        alertSubmit: function() {
                            alertStatus: 0
                        }
                    });
                } else {
                    if (this.clickLock == true) {
                        this.clickLock = false;
                        this.$ajax({
                            url: this.$root.jifuUrl + "/addUser",
                            data: this.qs.stringify(newDetail),
                            method: 'POST',
                            success: res => {
                                if (res.data.code == 200) {
                                    this.$refs.alert.show({
                                        alertText: '保存成功',
                                        alertSubmit: function() {
                                            alertStatus: 0
                                        }
                                    });
                                    setTimeout(() => {
                                        this.$router.push({
                                            name: 'userManager',
                                            params: {
                                                dataId: newDetail.organizationid
                                            }
                                        })
                                    }, 2000)
                                } else {
                                    this.clickLock = false;
                                    this.failText = res.data.message;
                                    this.$rootFunction().deleteResFail();
                                }
                            }
                        });
                    }
                }
            },
            editnews() {
                let that = this;
                if (that.orgArr == '') {
                    that.organizationid = '';
                } else if (that.orgArr != '') {
                    if (Array.isArray(that.orgArr)) {
                        that.organizationid = that.orgArr.pop();
                    } else {
                        that.organizationid = that.orgArr
                    }
                };
                if (this.LabelsIds != '') {
                    this.labels = this.LabelsIds.join(",")
                } else {
                    this.labels = ''
                };
                let editDetail = {
                    id: that.id,
                    rootcompanyid: 1,
                    roleLabel: that.searchSelect,
                    phone: that.ruleForm.tel,
                    nickname: that.nickname,
                    jobNum: that.jobNum,
                    headimg: that.imageUrl,
                    education: that.education,
                    sex: that.sex,
                    organizationid: that.organizationid,
                    stationid: that.gangweivalues,
                    labels: this.labels,
                    email: that.userEmail,
                    address: that.userAddress,
                    birthday: that.formData.year + '-' + that.formData.month + '-' + that.formData.day,
                    proviceid: that.proviceid,
                    cityid: that.cityid,
                };
                if (that.ruleForm.tel == '' || that.nickname == '' || editDetail.organizationid == '') {
                    this.$refs.alert.show({
                        alertText: '*为必选项！',
                        alertSubmit: function() {
                            alertStatus: 0
                        }
                    });
                } else {
                    this.$ajax({
                        url: this.$root.jifuUrl + '/updateUser',
                        data: this.qs.stringify(editDetail),
                        method: 'POST',
                        success: res => {
                            if (res.data.code == 200) {
                                this.$refs.alert.show({
                                    alertText: '保存成功',
                                    alertSubmit: function() {
                                        alertStatus: 0
                                    }
                                });
                                setTimeout(() => {
                                    this.$router.push({
                                        name: 'userManager',
                                        params: {
                                            identity: this.rootcompanyid,
                                            dataId: editDetail.organizationid
                                        }
                                    })
                                }, 2000)
                            } else {
                                this.failText = res.data.message;
                                this.$rootFunction().deleteResFail();
                            }
                        }
                    });
                }
            },
            openUserClassify() {
                this.$router.push({
                    name: 'userClassification'
                });
            },
            getDepartments() {
                this.$ajax({
                    url: this.$root.jifuUrl + "/getAllDepartment?" + '&rootcompanyid=1',
                    method: 'GET',
                    data: {},
                    success: res => {
                        if (res.data.code == 200) {
                            this.bumenoption = res.data.data;
                        }
                    }
                });
            },
            getAllStation() {
                this.$ajax({
                    url: this.$root.jifuUrl + "/getAllStation?" + '&rootcompanyid=1',
                    method: 'GET',
                    data: {},
                    success: res => {
                        if (res.data.code == 200) {
                            this.gangweioption = res.data.data;
                        }
                    }
                });
            },
            checkSave() {
                if (this.nowType == 'add') {
                    this.newAdd();
                } else if (this.nowType == 'edit') {
                    this.editnews();
                }
            },
            cancel() {
                this.$router.go(-1);
            },
            handleAvatarSuccess(res) {
                if (res.code == 200) {
                    this.imageUrl = res.data[0];
                };
            },
            beforeAvatarUpload(file) {
                const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png');
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            init() {
                this.getYear();
                this.getMonth();
                this.getDay();
            },
            getYear() {
                let date = new Date;
                let current_year = date.getFullYear();
                for (let i = 0; i < 60; i++) {
                    let y = current_year - i;
                    this.year.push(y);
                }
            },
            getMonth() {
                for (let i = 1; i < 13; i++) {
                    this.month.push(i);
                }
            },
            getDay() {
                this.day = [];
                let day = this.getDaysInMonth(this.formData.year, this.formData.month)
                for (let i = 1; i <= day; i++) {
                    this.day.push(i);
                }
            },
            getDaysInMonth(year, month) {
                month = parseInt(month, 10);
                let d = new Date(year, month, 0);
                return d.getDate();
            },
            padding0(num, length) { //数字前填充0方法
                for (let len = (num + "").length; len < length; len = num.length) {
                    num = "0" + num;
                }
                return num;
            },
            attitudeXueLi() {
                this.$ajax({
                    url: this.$root.jifuUrl + "/getLabelByType?" + 'type=' + 5,
                    method: 'GET',
                    data: {},
                    success: res => {
                        if (res.data.code == 200) {
                            this.educationOption = res.data.data;
                        }
                    }
                });
            },
            getTagType() {
                let tagType = 4;
                this.$rootFunction().tagType({
                    tagType
                });
            }
        },
        components: {
            labelAll,
            alert
        },
        mounted() {
            this.init();
            this.getParams();
            this.$rootFunction().getRootCompangIdStatus();
            this.attitudeXueLi();
            this.$rootFunction().getAllCity();
            this.getAllStation();
            this.getTagType();
            this.getOrganizationArr();
            if (this.nowType == "edit") {
                console.log('306', this.nowType, this.$root.userMsg);
                this.rootcompanyid = this.$root.userMsg.rootcompanyid;
                this.searchSelect = this.$root.userMsg.roleLabel;
                this.ruleForm.tel = this.$root.userMsg.phone;
                this.nickname = this.$root.userMsg.nickname;
                this.jobNum = this.$root.userMsg.jobNum;
                this.imageUrl = this.$root.userMsg.headimg;
                this.education = this.$root.userMsg.education;

                this.orgArr = this.$root.userMsg.organizationid;
                this.getOrganizationArr();
                this.sex = this.$root.userMsg.sex;
                this.userEnterp = this.$root.userMsg.companyName;

                this.bumenvalues = this.$root.userMsg.departmentid;
                this.gangweivalues = this.$root.userMsg.stationid;
                if (this.$root.userMsg.labelnames != null) {
                    var arrnames = this.$root.userMsg.labelnames.split(",");
                    this.LabelsNames = arrnames;
                    var arrids = this.$root.userMsg.labelids.split(",");
                    this.LabelsIds = arrids;
                };
                this.userEmail = this.$root.userMsg.email;
                this.userAddress = this.$root.userMsg.address;
                this.phone = this.$root.userMsg.phone;
                this.zhuceTime = this.$root.userMsg.registerTime;
                this.id = this.$root.userMsg.id;
                if (this.$root.userMsg.birthday != null) {
                    var s = this.$root.userMsg.birthday.split("-");
                    this.formData.year = parseInt(s[0]),
                        this.formData.month = parseInt(s[1]),
                        this.formData.day = parseInt(s[2])
                };
                this.proviceid = this.$root.userMsg.proviceid;
                this.cityid = this.$root.userMsg.cityid;
            }
        }
    }
</script>

<style>
    .addUser {
        padding-bottom: 100px;
    }
    
    .addUser .updownvideo {
        position: absolute;
        top: 0;
        left: 100px;
    }
    
    .addUser .telPhone .el-form-item__label {
        font-size: 16px;
        color: #333;
        text-align: left;
        padding: 0;
        width: 217px;
    }
    
    .addUser .telPhone .el-form {
        display: inline-block !important
    }
    
    .addUser .telPhone .el-form,
    .addUser .telPhone .el-form-item--feedback,
    .addUser .telPhone .el-form-item__content,
    .addUser .telPhone .el-input {
        width: 318px
    }
    
    .addUser .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,
    .addUser .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
        display: none;
    }
    
    .addUser .telPhone input {
        width: 217px;
        height: 34px;
        line-height: 34px;
        font-size: 14px;
        color: #333
    }
    
    .addUser .addSubVideolist .updownvideo,
    .addUser .addSubVideolist .avatar-uploader,
    .addUser .addSubVideolist .avatar-uploader .el-upload,
    .addUser .addSubVideolist .avatar-uploader-icon {
        width: 170px;
        height: 84px;
    }
    
    .addUser .avatar-uploader {
        width: 100px;
        height: 100px;
    }
    
    .addUser .el-button--primary.is-active,
    .addUser .el-button--primary:active {
        background: #44CEF6;
        border: none
    }
    
    .addUser .el-button--small,
    .addUser .el-button--small.is-round {
        padding: 0;
    }
    
    .addUser .upload-demo span {
        border: none;
        font-size: 14px !important;
        color: #fff !important;
    }
    
    .addUser .upload-demo .el-button {
        border: none;
    }
    
    .addUser .addSubVideo,
    .addUser .addSubVideolist {
        height: 122px !important;
        position: relative;
    }
    
    .addUser .el-upload-list {
        position: absolute;
        top: 0;
        left: 126px;
    }
    
    .addUser .el-upload-list__item-name {
        font-size: 14px;
        color: #333;
    }
    
    .addUser .el-upload-list__item:first-child {
        margin-top: 5px;
    }
    
    .addUser .el-button {
        background: #44CEF6;
        height: 33px;
        line-height: 33px;
        width: 100px;
        display: inline-block;
        padding: 0;
        border: 0;
        margin-top: 135px;
    }
    
    .addUser .el-button:hover {
        background: #31c7f2;
    }
    
    .addUser .el-select input[type="text"] {
        height: 34px !important;
        width: 155px;
    }
    
    .addUser .el-input__icon {
        line-height: 35px;
    }
    
    .addUser .avatar-uploader .el-upload {
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 100px;
        height: 100px;
    }
    
    .addUser .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    
    .addUser .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        text-align: center;
        background: #f2f2f2;
        padding-top: 22px;
    }
    
    .addUser .avatar-uploader-icon b {
        color: #ccc;
        display: block;
        font-weight: normal;
        font-size: 14px;
        margin-top: 3px;
    }
    
    .addUser .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
    /*	/*
	.addbanner .addCont {
		width: 934px;
		margin-left: 10px;
	}*/
    
    .addUser .addName span,
    .addUser .addSubVideo span,
    .addUser .addSubVideo span,
    .addUser .addSubVideolist span,
    .addUser .addSubTuijian span,
    .addUser .skillContainer span,
    .addUser .province span {
        width: 96px;
        display: inline-block;
        text-align: right;
    }
    
    .addUser .addSubVideo span,
    .addUser .addSubVideolist span {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .addUser .addName .el-input,
    .addUser .addName .el-input input {
        width: 155px;
        height: 34px;
        display: inline-block;
        font-size: 14px;
        color: #333;
    }
    
    .addUser .addName.from .el-input,
    .addUser .addName.from .el-input input {
        width: 146px;
    }
    
    .addUser .addName.enterprise .el-input,
    .addUser .addName.enterprise .el-input input {
        width: 217px;
    }
    
    .addUser .addName.text .el-input,
    .addUser .addName.text .el-input input {
        width: 217px;
    }
    
    .addUser .addName.zhuce em {
        font-size: 14px;
        color: #333;
        font-style: normal;
    }
    
    .addUser span {
        font-size: 16px;
        color: #333;
    }
    
    .addUser .updownvideo em {
        font-style: normal;
        font-size: 12px;
        color: #ccc;
        margin-top: 8px;
        display: block;
        line-height: 16px;
    }
    
    .addUser .teacherSkills {
        position: relative;
        height: 34px;
        line-height: 34px;
    }
    
    .addUser .skillDetail {
        width: 605px;
        height: 32px;
        line-height: 32px;
        border: 1px solid #ccc;
        border-radius: 5px;
        position: absolute;
        top: 0;
        left: 101px;
    }
    
    .addUser .skillDetail i {
        font-style: normal;
        color: #ccc;
        position: relative;
        top: -4px;
        margin-left: 4px;
        cursor: pointer;
    }
    
    .addUser .skillDetail span,
    .addUser .skillContent span {
        color: #44CEF6;
        font-size: 14px;
        width: auto !important;
        margin-left: 15px;
        cursor: pointer;
    }
    
    .addUser .skillContent {
        margin-left: 101px;
        height: auto !important;
        width: 607px;
        line-height: 28px
    }
    
    .addUser {
        position: relative;
    }
    
    .addUser .select-box {
        width: 300px;
        position: absolute;
        top: 0;
        left: 101px;
    }
    
    .addUser .select-box span {
        text-align: left;
        width: 65px;
        margin-right: 5px;
    }
    
    .addUser .select-box select {
        width: 100%;
        height: 32px;
        line-height: 32px;
        border: 1px solid #ccc;
        font-size: 12px;
        color: #666;
        border-radius: 5px;
    }
    
    .addUser .el-form-item__error {
        left: 0 !important;
    }
    
    .addUser .footerButton a {
        width: 100px;
        height: 34px;
        line-height: 34px;
        display: inline-block;
        font-size: 14px;
        margin-top: 165px;
        background: #44CEF6;
        color: #fff;
        border-radius: 4px;
        text-align: center;
        margin-left: 304px;
        cursor: pointer;
    }
    
    .addUser .footerButton a.cancel {
        margin-left: 208px;
        background: #ccc;
    }
    
    .addUser .warn {
        color: #f00;
        font-style: normal;
        font-size: 12px;
    }
    
    .addUser .warn i {
        margin-right: 5px;
        font-style: normal;
    }
    
    .addUser .addName.enterprise .el-cascader {
        width: 217px
    }
    
    .addUser .addName .el-radio {
        height: 33px;
        line-height: 33px;
    }
    
    .addUser .addName .labelFour {
        width: 400px;
        height: 33px;
        line-height: 33px;
        border: 1px solid #ccc;
        border-radius: 5px 0 0 5px;
        display: inline-block;
        box-sizing: border-box;
        float: left;
        margin-left: 5px;
    }
    
    .addUser .addName .labelFour span {
        position: relative;
        top: -2px;
        font-size: 14px;
        color: #333;
        margin-left: 16px;
        display: inline-block;
        width: auto;
    }
    
    .addUser .addName .openLabel {
        float: left;
        width: 80px;
        height: 33px;
        line-height: 33px;
        display: inline-block;
        color: #fff;
        margin-left: -5px;
        background: #44CEF6;
        text-align: center;
        font-size: 14px;
        border-radius: 0 5px 5px 0;
        box-sizing: border-box;
        cursor: pointer;
    }
    
    .addUser .addName .labelWarn {
        font-size: 12px;
        color: #999;
        margin-left: 101px;
    }
    
    .addUser .el-table__empty-text {
        color: #909399 !important;
        font-size: 14px;
    }
    
    .addUser .province .el-cascader .el-input input {
        font-size: 14px;
    }
    
    .province .el-cascader,
    .province .el-cascader .el-input,
    .province .el-cascader .el-input input {
        width: 216px;
    }
</style>